<template>
<div>

<div>
<center>
<h1>爬山猪生产养殖及溯源系统</h1>
   <div style="width: 80%;height:50px;">


<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
  
  </div>

  </center>
</div>

		<hr/>

 <div class="filter-more">
      <transition name="selectbox">
        <div class="box" v-show="boxshow">
          <Row v-for="(item,index) in filterBox" :key="index">
            <i-col span="2">{{item.name}}</i-col>
            <i-col span="60">
              <a href="#"
                v-for="(v,i) in item.items"
                :key="i"
                @click="clickrange(index,v,i)"
                class="text-filter"  >
                <span :class="{ isActive:v.active}">{{v.text}}</span>
              </a>
            </i-col>
			<hr/>
          </Row>
        </div>
      </transition>
      <div>
        <a href="#" v-for="(item,index) in selectBox" class="text-select" :key="index">
          {{item.text}}
          <i @click="removeCurrentSelect(index)">&times;</i>
        </a>
      </div>
      <p class="text-toggle" @click="togglebox">{{btnTxt ?'收起选项':'更多选项'}}</p>
    </div>


<div>
  <el-table>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="耳标号" width="100" align="center" />
      <el-table-column label="猪舍号" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="母猪编号" align="center" />
     
      <el-table-column label="出生日期" width="100" align="center"  />
      <el-table-column label="出生体重" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="投喂状况" align="center" />
       <el-table-column label="品种" align="center" />
      
    
      
    
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['monitor:job:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['monitor:job:remove']"
          >删除</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
                v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
              <el-dropdown-item command="handleView" icon="el-icon-view"
                v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
              <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
                v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>





</div>

</div>
</template>

<script>
import { addPig } from "@/api/system/archives/dpig";

export default {
	
data() {
    return {

        formInline: {
          user: '',
          region: ''
        },
      boxshow: false,
      btnTxt: false,
      selectBox: [],
      filterBox: [
        {
          name: '年份:  ',
          items: [
            { value: '1', text: '2022', active: false },
            { value: '2', text: '2021', active: false },
            { value: '3', text: '2020', active: false },
            { value: '4', text: '2019', active: false },
            { value: '5', text: '2018', active: false },
           
          ]
        },
        {
          name: '饲养员:  ',
          items: [
            { value: 'allAge', text: '张三', active: false },
            { value: 'treeY', text: '李四', active: false },
            { value: 'fourteenY', text: '王五', active: false },
          
          ]
        },
        {
          name: '养殖场:  ',
          items: [
            { value: 'allSex', text: '琅琊山养殖场', active: false },
            { value: 'man', text: '凤凰街道养殖场', active: false },
            { value: 'women', text: '南谯区养殖场', active: false },
          
          ]
        },
     
     
      ]
    };
  },
  methods: {
    togglebox: function() {
      this.boxshow = !this.boxshow;
      this.btnTxt = !this.btnTxt;
    },
    clickrange(parentIndex, el, childIndex) {
      var item = this.filterBox[parentIndex].items;
      item.filter((v, i) => {
        if (i === childIndex) {
          v.active = !v.active; // 选中和反选
          this.selectBox.unshift(v); // 选中的数组
        } else {
          v.active = false; // 取消选中
          this.selectBox.filter((childEl, childI) => {
            if (childEl.active === false) {
              this.selectBox.splice(childI, 1); // 反选删除数组中的当前个
            }
          });
        }
      });
      
    },
    removeCurrentSelect(index) {
      this.filterBox.filter((el, i) => {
        el.items.filter((data, childIndex) => {
          if (data.text == this.selectBox[index].text) {
            data.active = false;
          }
        });
      });
      this.selectBox.splice(index, 1);
    }
  },




  }

</script>
<style >

.filter-more {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #e8f4fd;
  padding: 25px 15px;
}
.box {
  height: 150px;
  overflow: hidden;
}
.text-toggle {
  text-align: center;
  cursor: pointer;
}
.selectbox-leave-active,
.selectbox-enter-active {
  transition: all 1s ease;
}
.selectbox-leave-active,
.selectbox-enter {
  height: 0px !important;
}
.selectbox-leave,
.selectbox-enter-active {
  height: 150px;
}
.text-filter {
  display: inline-block;
  color: #404040;
  width: 160px;
 
}
.text-select {
  display: inline-block;
  padding: 0px 5px;
  border: 1px solid #268edb;
  border-radius: 40px;
  color: #268edb;
  font-size: 14px;
  margin-right: 20px;
  
}
.isActive {
  background-color: #2989dd;
  border-radius: 40px;
  color: #ffffff;
}
@keyframes myfirst {
  from {
    background: #ffffff;
  }
  to {
    background: #2989dd;
  }
}



</style>